import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import ResponsiveImage from '@/components/ResponsiveImage'
import { formatNumber, formatTime } from '@/utils'
import css from './index.module.scss'
class Cover extends PureComponent {
    static propTypes = {
        // 视频aid
        aid: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string
        ]),
        // 视频bvid
        bvid: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string
        ]),
        // 图片地址
        pic: PropTypes.string.isRequired,
        // 标题
        title: PropTypes.string.isRequired,
        // 播放数
        play: PropTypes.number,
        // 弹幕数
        danmaku: PropTypes.number,
        // 排列方向 
        direction: PropTypes.string,
        // 作者
        author: PropTypes.string,
        // 时长
        duration: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string
        ]),
        onClick: PropTypes.func
    }

    static defaultProps = {
        play: 0,
        danmaku: 0,
        direction: 'vertical'
    }

    state = {
        directions: ['vertical', 'horizontal']
    }

    handleDetail = () => {
        if (typeof this.props.onClick === 'function') {
            this.props.onClick(this.props)
        } else {
            const { bvid } = this.props
            this.props.history.push(`/video/${bvid}`)
        }        
    }

    render() {
        const { title, danmaku, play, pic, author, direction, duration, className } = this.props
        const { directions } = this.state
        const matchD = directions.includes(direction)

        if (typeof this.props.render === 'function') {
            return this.props.render(this.props)
        } else if (matchD && direction === 'horizontal') {
            // 水平方向排列
            return (
                <div className={`${css['wrap-horizontal']} ${className ? className : ''}`} onClick={this.handleDetail}>
                    <div className={css['cover']}>
                        <ResponsiveImage                             
                            src={pic}
                        >
                            <div className={css['duration']}>
                                <span>{formatTime(duration)}</span>                                
                            </div>
                        </ResponsiveImage>
                    </div>
                    <div className="content">
                        <div className="title" dangerouslySetInnerHTML={{__html: title}}></div>
                        { author && <div className={css["author"]}>
                            <i className="fa fa-up-zhu"></i>{ author }
                        </div> }
                        <div className={css["count"]}>
                            <span><i className="fa fa-bofangshu"></i>{formatNumber(play)}</span>
                            <span><i className="fa fa-danmushu"></i>{formatNumber(danmaku)}</span>
                        </div>
                    </div>
                </div>
            )
        } else {
            // 默认垂直方向排列
            return (
                <div className={`${css["wrap"]} ${className ? className : ''}`} onClick={this.handleDetail}>               
                    <ResponsiveImage 
                        className={css['cover']} 
                        src={pic}
                    >
                        { 
                            this.props.children || 
                            <div className={css['count']}>
                                <span><i className="fa fa-bofangshu"></i>{formatNumber(play)}</span>
                                <span><i className="fa fa-danmushu"></i>{formatNumber(danmaku)}</span>
                            </div>
                        }
                    </ResponsiveImage>
                    <div className={css['title']}>{title}</div>
                </div>
            )
        }        
    }
}

export default withRouter(Cover)